<template>
	<div>
		<div class="search">
			<input v-model="keyWord" class="searchInp" type="text" placeholder="输入城市名或拼音" />
		</div>
		<div class="search-content" v-show="keyWord">
			<ul>
				<li class="search-item border-bottom" 
					v-for="item in list"
					@click="handleChangeCity(item.name)"				
				>{{item.name}}</li>
				<li v-show="noData">没有找到匹配的数据</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'searchCity',
		data(){
			return {
				keyWord:'',
				timer:null,
				list:[],
			}
		},
		computed:{
			noData(){
				return !this.list.length
			}
		},
		props:{
			citys:Object
		},
		watch:{
			keyWord(){
				if (this.timer) {
					clearTimeout(this.keyWord)
				}
				this.timer=setTimeout(()=>{
					const result=[];
					for(let i in this.citys){
						this.citys[i].forEach((value)=>{
							if (value.spell.indexOf(this.keyWord)!=-1 || value.name.indexOf(this.keyWord)!=-1) {
								result.push(value)
							}
						})
					}
					this.list=result;
				},100)
			}
		},
		methods:{
			handleChangeCity(city){
				this.$store.dispatch('changeCity',city);
				this.$router.push('/')
			}
		}
	}
</script>
<style lang="stylus" scoped>
	@import '../../../assets/styles/varibles.styl'
	.search
		height:0.7rem
		padding 0 0.1rem
		background:$bgColor
		.searchInp
			box-sizing:border-box
			width:100%
			height:0.62rem
			line-height:0.62rem
			text-align:center
			color:#666
			padding:0 0.2rem
			border-radius:0.06rem
	.search-content
		position:absolute
		z-index:5
		background:#eee
		top:1.62rem
		left:0
		bottom:0
		right:0
		.search-item
			background:#fff
			line-height:0.3rem
			padding:0.2rem
		
</style>